spb/hilmacorp

1/**2 * Author: Simon-Pierre Boucher3 * Contact: contact@spboucher.ai4 * Project: Hilmacorp.ai — Web Platform5 * File: app/[locale]/page.tsx6 * Description: Home page — hero, introduction, commitments, services overview, method strip, call to action7 */89import type { Metadata } from "next";10import Link from "next/link";11import Container from "@/components/Container";12import SectionHeading from "@/components/SectionHeading";13import { getMessages, isLocale, type Locale } from "@/lib/i18n";1415export async function generateMetadata({16  params,17}: {18  params: Promise<{ locale: string }>;19}): Promise<Metadata> {20  const { locale } = await params;21  if (!isLocale(locale)) return {};22  const { meta } = getMessages(locale);23  return { title: { absolute: meta.home.title }, description: meta.home.description };24}2526export default async function HomePage({27  params,28}: {29  params: Promise<{ locale: string }>;30}) {31  const { locale } = await params;32  const typedLocale = locale as Locale;33  const messages = getMessages(typedLocale);34  const { home, services } = messages;3536  return (37    <>38      {/* Hero */}39      <section className="relative overflow-hidden border-b border-line">40        <div className="grid-backdrop absolute inset-0" aria-hidden="true" />41        <Container className="relative py-24 sm:py-36">42          <p className="mb-5 font-mono text-xs uppercase tracking-[0.3em] text-accent">43            {home.heroKicker}44          </p>45          <h1 className="max-w-4xl font-display text-4xl font-semibold leading-[1.08] tracking-tight text-ink sm:text-6xl">46            {home.heroTitle}47          </h1>48          <p className="mt-8 max-w-2xl text-lg leading-relaxed text-ink-soft">49            {home.heroLead}50          </p>51          <div className="mt-10 flex flex-wrap gap-4">52            <Link53              href={`/${typedLocale}/contact`}54              className="rounded-full bg-ink px-7 py-3 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"55            >56              {home.heroCtaPrimary}57            </Link>58            <Link59              href={`/${typedLocale}/services`}60              className="rounded-full border border-line-strong px-7 py-3 text-sm font-medium text-ink transition-colors hover:border-accent hover:text-accent"61            >62              {home.heroCtaSecondary}63            </Link>64          </div>65        </Container>66      </section>6768      {/* Stats band */}69      <section className="border-b border-line bg-paper-2">70        <Container>71          <dl className="grid grid-cols-1 divide-y divide-line sm:grid-cols-3 sm:divide-x sm:divide-y-0">72            {[73              { value: "8", label: home.statsProjects },74              { value: "2", label: home.statsLanguages },75              { value: "8", label: home.statsSteps },76            ].map((stat) => (77              <div key={stat.label} className="px-2 py-9 text-center">78                <dd className="font-display text-4xl font-semibold text-accent">79                  {stat.value}80                </dd>81                <dt className="mt-1 text-sm text-ink-faint">{stat.label}</dt>82              </div>83            ))}84          </dl>85        </Container>86      </section>8788      {/* Introduction */}89      <section className="py-20 sm:py-28">90        <Container>91          <SectionHeading title={home.introTitle} />92          <div className="mt-8 grid gap-8 lg:grid-cols-2">93            <p className="leading-relaxed text-ink-soft">{home.introBody1}</p>94            <p className="leading-relaxed text-ink-soft">{home.introBody2}</p>95          </div>96          <div className="mt-10 flex flex-wrap gap-6">97            <Link98              href={`/${typedLocale}/about`}99              className="text-sm font-medium text-accent hover:text-accent-strong"100            >101              {home.introLinkAbout} →102            </Link>103            <Link104              href={`/${typedLocale}/founders`}105              className="text-sm font-medium text-accent hover:text-accent-strong"106            >107              {home.introLinkFounders} →108            </Link>109          </div>110        </Container>111      </section>112113      {/* Commitments */}114      <section className="border-t border-line bg-paper-2 py-20 sm:py-28">115        <Container>116          <SectionHeading title={home.whyTitle} lead={home.whyLead} />117          <ul className="mt-12 grid gap-4 sm:grid-cols-2">118            {home.why.map((item, index) => (119              <li120                key={item.title}121                className="rounded-2xl border border-line bg-card p-8"122              >123                <p className="font-mono text-sm text-accent">124                  {String(index + 1).padStart(2, "0")}125                </p>126                <h3 className="mt-3 font-display text-xl font-semibold text-ink">127                  {item.title}128                </h3>129                <p className="mt-3 leading-relaxed text-ink-soft">{item.body}</p>130              </li>131            ))}132          </ul>133        </Container>134      </section>135136      {/* Services overview */}137      <section className="py-20 sm:py-28">138        <Container>139          <SectionHeading title={home.servicesTitle} lead={home.servicesLead} />140          <ul className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">141            {services.items.map((service, index) => (142              <li key={service.id}>143                <Link144                  href={`/${typedLocale}/services#${service.id}`}145                  className="group block h-full rounded-2xl border border-line bg-card p-6 transition-colors hover:border-accent"146                >147                  <p className="font-mono text-xs text-ink-faint">148                    {String(index + 1).padStart(2, "0")}149                  </p>150                  <h3 className="mt-3 text-base font-semibold text-ink group-hover:text-accent">151                    {service.title}152                  </h3>153                </Link>154              </li>155            ))}156          </ul>157          <div className="mt-10">158            <Link159              href={`/${typedLocale}/services`}160              className="text-sm font-medium text-accent hover:text-accent-strong"161            >162              {home.servicesCtaAll} →163            </Link>164          </div>165        </Container>166      </section>167168      {/* Method strip */}169      <section className="border-t border-line bg-ink py-16 sm:py-20">170        <Container className="flex flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between">171          <div className="max-w-2xl">172            <h2 className="font-display text-2xl font-semibold tracking-tight text-paper sm:text-3xl">173              {home.processTitle}174            </h2>175            <p className="mt-3 leading-relaxed text-paper/70">{home.processBody}</p>176          </div>177          <Link178            href={`/${typedLocale}/about`}179            className="shrink-0 rounded-full border border-paper/30 px-6 py-2.5 text-sm font-medium text-paper transition-colors hover:border-paper hover:bg-paper hover:text-ink"180          >181            {home.processLink}182          </Link>183        </Container>184      </section>185186      {/* Call to action */}187      <section className="py-20 sm:py-28">188        <Container className="text-center">189          <h2 className="font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">190            {home.ctaTitle}191          </h2>192          <p className="mx-auto mt-5 max-w-2xl leading-relaxed text-ink-soft">{home.ctaBody}</p>193          <Link194            href={`/${typedLocale}/contact`}195            className="mt-9 inline-block rounded-full bg-ink px-8 py-3.5 text-sm font-medium text-paper transition-colors hover:bg-accent-strong"196          >197            {home.ctaButton}198          </Link>199        </Container>200      </section>201    </>202  );203}204